<template>
  <div class="home">
    <div>
      <el-steps :active="activetitle" align-center>
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
    </div>
    <div class="lisnd">
      <div class="lisdf">
        <div
          v-for="(item, index) in liset"
          :key="index"
          @click="mittimn(item.state)"
          :class="{ ihdfgs: liflg == item.state }"
        >
          {{ item.nume }}
        </div>
      </div>
      <div class="lisdjfn" v-if="liflg == 1">
        <el-form
          :model="formLabelAlign"
          :rules="rules"
          ref="formLabelAlign"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="formLabelAlign.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="name">
            <el-input v-model="formLabelAlign.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="商品重量" prop="name">
            <el-input v-model="formLabelAlign.goods_weight"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="name">
            <el-input v-model="formLabelAlign.goods_number"></el-input>
          </el-form-item>
          <el-form-item label="" prop="region">
            <el-cascader
              style="width: 100%"
              v-model="formLabelAlign.goods_cat"
              :options="cateList"
              @change="handleChange"
              :props="{ label: 'cat_name', value: 'cat_id' }"
            ></el-cascader>
          </el-form-item>
        </el-form>
      </div>
      <div class="lisdjfn" v-if="liflg == 2">商品参数</div>
      <div class="lisdjfn" v-if="liflg == 3">商品属性</div>
      <div class="lisdjfn" v-if="liflg == 4">
        <el-upload
          class="upload-demo"
          action="http://www.ysqorz.top:8888/api/private/v1/upload"
          :on-remove="handleRemove"
          :on-success="handleSuccess"
          :headers="Headers"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
      <div class="lisdjfn" v-if="liflg == 5">
        <quill-editor v-model="formLabelAlign.goods_introduce"></quill-editor>
        <el-button
          type="primary"
          @click="onSubmit"
          style="margin: 20px"
          v-if="lisdj == 1"
          >添加商品</el-button
        >
        <el-button
          type="primary"
          @click="Submit"
          v-if="lisdj == 2"
          style="margin: 20px"
          >添加商品</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { getcategories, postgoods, putgoods } from "@/Api";
export default {
  data() {
    return {
        Headers: {
        Authorization: sessionStorage.getItem("token"),
      },
      formLabelAlign: {},
      dialogImageUrl: "",
      dialogVisible: false,
      activetitle: 1,
      liflg: 1,
      lisdj: 1,
      liset: [
        { nume: "基本信息", state: 1 },
        { nume: "商品参数", state: 2 },
        { nume: "商品属性", state: 3 },
        { nume: "商品图片", state: 4 },
        { nume: "商品内容", state: 5 },
      ],
      cateList: [],
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        goods_price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
        ],
        goods_number: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
        ],
        goods_weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
        ],
        goods_cat: [
          { required: true, message: "请输入商品分类", trigger: "blur" },
        ],
      },
    };
  },
  mounted(e) {
    this.getCate();
   

    if (JSON.parse(this.$route.query.str) != undefined) {
      this.formLabelAlign = detailArr;
      this.lisdj = 2;
    }
  },
  
  methods: {
     handleSuccess(res) {
      console.log("res", res);
      let pic = { pic: res.data.tmp_path };
      this.formLabelAlign.pics.push(pic);
      console.log(this.form.pics);
    },
   // 图片删除时触发
    handleRemove(sc) {
      console.log("sc", sc);
      let sc1 = sc.response.data.tmp_path;
      let index = this.formLabelAlign.pics.findIndex((item) => {
        return item.pic == sc1;
      });
      this.formLabelAlign.pics.splice(index, 1);
      console.log(this.form.pics);
    },
    getCate() {
      // 获取分类列表
      getcategories().then((res) => {
        // console.log(res);
        this.cateList = res.data;
      });
    },
    mittimn(e) {
      let a = this.formLabelAlign;
      if (
        a.goods_name &&
        a.goods_price &&
        a.goods_number &&
        a.goods_weight &&
        a.goods_cat
      ) {
        this.activetitle = e;
      } else {
        this.activetitle = 1;
      }

      this.liflg = e;
    },
    handleChange(e) {
      console.log(e);
      this.formLabelAlign.goods_cat = e.toString();
    },

    Submit() {
      console.log(this.formLabelAlign);

      putgoods({ id: this.formLabelAlign.goods_id }, this.formLabelAlign).then(
        (res) => {
          console.log(res);
          if (res.meta.status === 200) {
            this.$message({
              message: res.meta.msg,
              type: "success",
            });
            this.$router.push({ path: "/goods" });
          } else {
            this.$message({
              message: res.meta.msg,
              type: "error",
            });
          }
        }
      );
    },

    onSubmit() {
      console.log(this.formLabelAlign);

      postgoods(this.formLabelAlign).then((res) => {
        console.log(res);
        if (res.meta.status === 201) {
          this.$message({
            message: res.meta.msg,
            type: "success",
          });
          this.$router.push({ path: "/goods" });
        } else {
          this.$message({
            message: res.meta.msg,
            type: "error",
          });
          this.$router.push({ path: "/goods" });
        }
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
  components: {},
};
</script>

<style lang='scss' scoped>
.home {
  background: #fff;
}
h1 {
  color: #fff;
}
.lisnd {
  width: 100%;
  padding: 30px 30px;
  display: flex;
  // border: 1px solid;
  .lisdf {
    line-height: 40px;
    // color: rgb(0, 136, 255);
    font-size: 14px;
    border-right: 1px solid #000;
    // padding: 0 20px ;
    .ihdfgs {
      color: red;
      border-right: 1px solid red;
      width: 140px;
    }
  }
  .lisdjfn {
    width: 80%;
    // border: 1px solid;
  }
}
</style>
